<template>
	<view class="prefecture bg-FFF px-16 round-8">
		<view class="" v-show="list.length > 0">
			<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :fixed="false">
				<view class="py-32" v-for="(item,index) in list" :key="item.id" @click="goDetail(item)">
					<view class="flex items-center">
						<view class="relative">
							<image :src="globalConfig.imagePrefix + item.cover" mode="" class="prodIcons round-12"></image>
						</view>
						<view class="ml-32">
							<view class="text-28 u-line-1">
								{{item.prodName}}
							</view>
							<view class="text-36 sprice mt-12">
								￥{{item.price}}
							</view>
							<view class="mt-12 buyBtn flex items-center justify-between text-28 text-center">
								<view class="">
									剩余{{item.stocks}}件
								</view>
								<view class="text-FFF">
									立即购买
								</view>
							</view>
						</view>
					</view>
				</view>
			</s-pull-scroll>
		</view>
	

		<view class="flex flex-col items-center" v-if="list.length == 0">
			<image src="https://file.fulewanjia.com/fulewanjia/profile/appImg/index/img_zanwushangpin.png" class="empty-img"
				mode=""></image>
			<view class="text-28 text-gray">
				暂无商品
			</view>
		</view>

		<u-loading-page :loading="loading"
			image="https://file.fulewanjia.com/fulewanjia/profile/appImages/common/loading.gif"
			icon-size="100" loading-text=" " loading-mode="spinner"></u-loading-page>
	</view>
</template>

<script>
	export default {
		name: "PrefectureList",
		data() {
			return {
				globalConfig: getApp().globalData.config,
				list: [],
				loading:false
			};
		},
		props: {
			params: {
				default: {},
			}
		},
		mounted() {
			this.refresh()
		},
		methods: {
			goDetail(item) {
				this.$tab.nav(`/pages/commodity/detail?id=${item.id}&storeId=${item.storeId}`)
			},
			refresh() {
				this.list = [];
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(async () => {
					if (pullScroll.page == 1) {
						this.list = [];
					}
					this.loading = true
					const res = await this.$Api.index.getProductsList({
						pageNum: pullScroll.page,
						pageSize: 10,
						isPlatform: 1,
						...this.params
					})

					console.log(this.list)
					this.list = this.list.concat(res.rows || []);
					
					if(res.total == 0){
						pullScroll.empty();
					}

					if (this.list.length >= res.total) {
						pullScroll.finish();
					} else {
						pullScroll.success();
					}
					this.loading = false
				}, 500);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.prefecture {
		height: 100%;
		width: 100%;
	}

	.prodIcons {
		width: 220rpx;
		height: 220rpx;
	}

	.storesTemp {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}

	.buyBtn {
		width: 371rpx;
		height: 76rpx;
		background: url('https://file.fulewanjia.com/fulewanjia/profile/appImages/common/libao-button@2x.png');
		background-size: 100% 100%;

		view {
			width: 50%;
		}
	}
</style>